<form class="form-horizontal">
    <h4>General</h4>
    <fieldset>
        <div class="control-group">
            <label class="control-label"></label>
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: ownSettings.enabled">Enable theme
                </label>
            </div>
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: ownSettings.enableCustomization"> Enable customization
                </label>
            </div>
            <div class="controls">
                <label class="checkbox">
                    <input type="checkbox" data-bind="checked: tabIcons.enabled"> Enable Tab-icons
                </label>
            </div>

        </div>
        <div class="control-group">
            <label class="control-label">Theme</label>
            <div class="controls">
                <select data-bind="value: ownSettings.theme">
                    <option value="discorded">Discorded</option>
                    <option value="material_ui_light">Material UI light</option>
                    <option value="cyborg">Cyborg</option>
                    <option value="discoranged">Discoranged</option>
                    <option value="dyl">Dyl</option>
                    <option value="nighttime">Nighttime</option>
                </select>
            </div>
        </div>

    </fieldset>

    <div data-bind="css: { disabled: !ownSettings.enableCustomization() }">
        <h4>Customization</h4>
        <div data-bind="foreach: ownSettings.color">
            <div class="control-group">
                <label class="control-label">Navbar</label>
                <div class="controls">
                    <input type="color" class="input-mini" data-bind="value: value">
                    <input type="text" class="input-mini" data-bind="value: value">
                    <i data-bind="attr: { class: enabled() ? 'fa fa-check-square-o' : 'fa fa-square-o' }, click: $parent.onRuleToggle"></i>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <small>
                <a href="#" class="muted" onclick="$(this).children().toggleClass('fa-caret-right fa-caret-down').parent().parent().parent().next().slideToggle('fast')">
                    <i class="fa fa-caret-right"></i> Advanced options</a>
            </small>
        </div>
        <div class="hide" style="display: none;" data-bind="css: { disabled: !ownSettings.enableCustomization() }">
            <h5>Custom style</h5>
            <div style="margin-left: 25px">
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>
                                Selector
                            </th>
                            <th>
                                CSS-Rule
                            </th>
                            <th>
                                Color Picker
                            </th>
                            <th>
                                Value
                            </th>
                            <th>
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody class="control-group" data-bind="foreach: customRules">
                        <tr>
                            <td>
                                <input type="text" value="Selector" data-bind="value: selector">
                            </td>
                            <td>
                                <input type="text" value="Selector" data-bind="value: rule">
                            </td>
                            <td>
                                <input type="color" class="input-mini" data-bind="value: value">
                            </td>
                            <td>
                                <input type="text" class="input-mini" data-bind="value: value">
                            </td>
                            <td>
                                <i data-bind="attr: { class: enabled() ? 'fa fa-check-square-o' : 'fa fa-square-o' }, click: $parent.onRuleToggle"></i>
                                <i class="fa fa-trash-o" data-bind="css: { disabled: !$parent.ruleIsDeleteable($data) }, click: $parent.onCustomRuleDelete"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="control">
                    <button class="btn" data-bind="click: addNewCustomRule">New</button>
                </div>
            </div>
            <h5>Custom Tab-icons</h5>
            <span class="help-block" style="padding-bottom: 10px">Here you can customize the icons in the tab-navigation. 
                Use the selector to specify which DOM-element you want to edit.
            See <a target="_blank" href="https://fontawesome.com/v4.7.0/icons/">here</a> for a list of FontAwesome-Classes to use.</span>
            <div style="margin-left: 25px">
                <table class="table table-striped table-condensed">
                    <thead>
                        <tr>
                            <th>
                                Selector
                            </th>
                            <th>
                                FontAwesome class
                            </th>
                            <th>
                                    Preview
                                </th>
                            <th>
                                Action
                            </th>
                        </tr>
                    </thead>
                    <tbody class="control-group" data-bind="foreach: tabIcons.tabs">
                        <tr>
                            <td>
                                <input type="text" value="Selector" data-bind="value: domId">
                            </td>
                            <td>
                                <input type="text" value="Icon" data-bind="value: faIcon">
                            </td>
                            <td>
                                    <i class="fa fa-eye" data-bind="attr: { class: faIcon }"></i>
                                </td>
                            <td>
                                <i data-bind="attr: { class: enabled() ? 'fa fa-check-square-o' : 'fa fa-square-o' }, click: $parent.onRuleToggle"></i>
                                <i class="fa fa-trash-o" data-bind="css: { disabled: !$parent.ruleIsDeleteable($data) }, click: $parent.onIconDelete"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="control">
                        <button class="btn" data-bind="click: addNewIcon">New</button>
                    </div>
            </div>
        </div>
    </div>


</form>